import advListEjs from '$v/advList'
import advApi from '$a/advApi'
import advTableEjs from '$com/advTable'
function addAdvBtn(){
    $('modal-title').html('添加广告')
    document.advForm.reset()
    $('#preview').hide().find('img').attr('src','')
    $('[name=id]').val('')
    $('#myModal').modal('show')
}
// 图片预览
function changeFile(){
    const reader = new FileReader()
    reader.readAsDataURL(this.files[0])
    reader.onload = function(e){
        let base64URL = e.currentTarget.result
        $('#preview').show().find('img').attr('src',base64URL)
    }
}
async function saveBtn(){
    let _id = $('[name=id]').val()
    let formdata = new FormData(document.advForm)
    let advTitle = formdata.get('advTitle').trim()
    let advOrder = formdata.get('advOrder').trim()
    let advHref = formdata.get('advHref').trim()
    if(!advTitle.length){
        toastr.error('标题不能为空')
        return
    }else if(!advOrder.length){
        toastr.error('排序值不能为空')
        return
    }else if(!advHref.length){
        toastr.error('链接不能为空')
        return
    }
    // 发送请求
    let result
    if(_id.length === 0){
        console.log('成功');
        result = await advApi.addAdv(formdata)
    }else{
        result = await advApi.editAdv(formdata,_id)
    }
    let {code,msg} = result
    console.log('msg,code',msg,code);
    if(code){
        console.log(code);
        toastr.error(msg)
    }else{
        // 清空表单数据
        document.advForm.reset()
        // 关闭预览框
        $('#preview').hide().find('img').attr('src','')
        // 关闭模态框
        $('#myModal').modal('hide')
        // 页面重新渲染
        await getAdvList()
    }
}
async function getAdvList(pageIndex=1){
    let keyword = $('[name=keyword]').val().trim()
    console.log(keyword);
    let {code,msg,data} = await advApi.getAdvList(pageIndex,keyword)
    $('#advTable').html(advTableEjs({...data}))
}

async function editBtnClick(){
    $('.modal-title').html('编辑广告')
    let _id = this.dataset.id
    let {data:{adv}} = await advApi.getById(_id)
    $('[name=advTitle]').val(adv.advTitle)
    $('[name=advType]').val(adv.advType)
    $('[name=advOrder]').val(adv.advOrder)
    $('[name=advHref]').val(adv.advHref)
    // 显示预览图
    $('#preview').show().find('img').attr('src','http://127.0.0.1:7000/upload/' + adv.advPic)
    $('[name=id]').val(adv._id)
    $('#myModal').modal('show')
}

// 搜索
async function search(){
    
    getAdvList()
}

function pageBtn(){
    let pageIndex = this.dataset.pageIndex
    getAdvList(pageIndex)
}
export default function advController(){
    return async (req, res, next) => {
        res.render(advListEjs())
        await getAdvList()
        $('#titleShow').html('广告列表')
        // 添加广告
        $('#addAdminBtn').on('click',addAdvBtn)
        // 上传图片
        $('[name=advPic]').on('change',changeFile)
        // 点击保存
        $('#saveBtn').on('click',saveBtn)
        //点击编辑
        $('#advTable').on('click','.editBtn',editBtnClick)
        // 点击搜索
        $('#searchBtn').on('click',search)
        // 分页事件
        $('#advTable').on('click','.page-item',pageBtn)
    }
}